<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 标题 -->
        <my-tree
          :tree-list="company"
          :is-root="true"
          @addDepartment="addDepartment"
        />
        <hr>
        <!-- 树状菜单 -->
        <el-tree
          :data="data"
          :props="defaultProps"
          :default-expand-all="true"
        >
          <template #default="scoped">
            <my-tree
              :tree-list="scoped.data"
              :is-root="false"
              @sendDel="getDepartmentList"
              @addDepartment="addDepartment"
              @edit="editDepartment"
            />
          </template>
        </el-tree>
      </el-card>
      <my-add
        ref="addModule"
        :show-dialog.sync="showDialog"
        :node-value="nodeValue"
        @updateList="getDepartmentList"
      />
    </div>
  </div>
</template>

<script>
import myTree from './tree.vue'
import myAdd from './add.vue'
import { getDepartments } from '../../api/departments.js'
import { dataTransform } from '../../utils/index.js'

export default {
  components: {
    myTree,
    myAdd
  },
  data() {
    return {
      company: {
        label: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        id: ''
      },
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 是否显示弹窗
      showDialog: false,
      // 子组件传过来的组织列表
      nodeValue: {}
    }
  },
  mounted() {
    this.getDepartmentList()
  },
  methods: {
    async getDepartmentList() {
      // 获取部门列表
      const res = await getDepartments()
      // console.log(res)
      this.data = dataTransform(res.depts, '')
    },
    addDepartment(nodeValue) {
      this.showDialog = true
      this.nodeValue = nodeValue
    },
    // 编辑
    async editDepartment(value) {
      // 调用弹框的根据数据获取回填
      await this.$refs.addModule.dealEdit(value.id)
      this.showDialog = true
      this.nodeValue = value
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px  50px;
  font-size:14px;
}
</style>

